<template>
  <div>
    <a-button type="primary" @click="getChangeDataFun()">获取选中</a-button>
    <ITransferTable ref="transferRef" :transferData="transferData" @chagneTableDataFun='chagneTableDataFun'></ITransferTable>
    <LibDoc :libDocData="libDocData"></LibDoc>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { ITransferTable } from 'wd-platform-library'
import { TransferDataInterface } from 'wd-platform-library/lib/src/ITransferTable/src/ITransferTableInterFace'

export default defineComponent({
    name: 'i_transfer_demo',
    setup () {
        const transferRef = ref()
        const transferData = reactive<TransferDataInterface<any>>({
            dataList: [],
            checkList: [],
            options: {
                disabled: false,
                showSearch: true, // 是否展示搜索
                showSelectAll: true // 是否展示全选
            },
            leftTableColumns: [
                {
                    dataIndex: 'id',
                    title: 'ID'
                },
                {
                    dataIndex: 'name',
                    title: '名字'
                },
                {
                    dataIndex: 'description',
                    title: '描述'
                }
            ],
            rightTableColumns: [
                {
                    dataIndex: 'id',
                    title: 'ID'
                },
                {
                    dataIndex: 'name',
                    title: '名字'
                }
            ],
            filterField: 'id',
            replaceField: {
                key: 'id',
                title: 'name'
            }
        })
        onMounted(() => {
            setTimeout(() => {
                transferData.dataList = []
                transferData.checkList = []
                for (let index = 0; index < 55; index++) {
                    transferData.dataList.push({
                        id: index.toString(),
                        name: '姓名' + index,
                        description: '描述' + index,
                        disabled: index % 3 === 0
                    })
                    if (index % 7 === 0) {
                        transferData.checkList.push(index.toString())
                    }
                }
            }, 2000)
        })
        const chagneTableDataFun = (selectKeys:string[]) => {
            alert(selectKeys)
        }
        const getChangeDataFun = () => {
            alert(transferRef.value.checkTransferDataList())
        }
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '完整代码',
                    type: 'pre',
                    value: `
<template>
  <div>
    <a-button type="primary" @click="getChangeDataFun()">获取选中</a-button>
    <ITransferTable ref="transferRef" :transferData="transferData" @chagneTableDataFun="chagneTableDataFun"></ITransferTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { ITransferTable } from 'wd-platform-library'
import { TransferDataInterface } from 'wd-platform-library/lib/src/ITransferTable/src/ITransferTableInterFace'

export default defineComponent({
    name: 'i_diaolg_demo',
    setup () {
        const transferRef = ref()
        const transferData = reactive<TransferDataInterface<any>>({
            dataList: [],
            checkList: [],
            options: {
                disabled: true,  //可以根据权限设置是否禁止选择,true:禁止选择,false:可选
                showSearch: true, // 是否展示搜索
                showSelectAll: true // 是否展示全选
            },
            leftTableColumns: [
                {
                    dataIndex: 'id',
                    title: 'ID'
                },
                {
                    dataIndex: 'name',
                    title: '名字'
                },
                {
                    dataIndex: 'description',
                    title: '描述'
                }
            ],
            rightTableColumns: [
                {
                    dataIndex: 'id',
                    title: 'ID'
                },
                {
                    dataIndex: 'name',
                    title: '名字'
                }
            ],
            filterField: 'id',
            replaceField: {
                key: 'id',
                title: 'name'
            }
        })
        onMounted(() => {
            setTimeout(() => {
                transferData.dataList = []
                transferData.checkList = []
                for (let index = 0; index < 55; index++) {
                    transferData.dataList.push({
                        id: index.toString(),
                        name: '姓名' + index,
                        description: '描述' + index,
                        disabled: index % 3 === 0
                    })
                    if (index % 7 === 0) {
                        transferData.checkList.push(index.toString())
                    }
                }
            }, 2000)
        })
        const chagneTableDataFun = (selectKeys:string[]) => {
            alert(selectKeys)
        }
        const getChangeDataFun = () => {
            alert(transferRef.value.checkTransferDataList())
        }
        return {
            chagneTableDataFun,
            transferRef,
            getChangeDataFun,
            transferData,
        }
    },
    components: {
        ITransferTable,
    }
})
<script>`
                }
            ]
        }
        return {
            chagneTableDataFun,
            transferRef,
            getChangeDataFun,
            transferData,
            libDocData
        }
    },
    components: {
        ITransferTable,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
